@import "lib/styles/variable.scss";

.yui-checkbox-wrapper {
  // margin-right: 10px;
  // padding: 10px 0;
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  cursor: pointer;
  .yui-checkbox {
    padding: 10px;
    &-input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      outline: none;
      opacity: 0;
      padding: 0;
      box-sizing: border-box;
    }
    &-inner {
      position: relative;
      display: block;
      width: 16px;
      height: 16px;
      border: 1px solid $radio-borderColor;
      border-radius: 3px;
      background: #fff;
      transition: all 0.3s;

      &.yui-checkbox-checked {
        background: $main-color;
        border: none;
        &::after {
          content: "";
          position: absolute;
          top: 2px;
          left: 5px;
          width: 6px;
          height: 10px;
          transform: rotate(45deg);
          border: 2px solid #fff;
          border-top: none;
          border-left: none;
        }
      }
      &.yui-checkbox-indeterminate {
        background: $main-color;
        border: none;
        &::after {
          content: "";
          position: absolute;
          top: 7px;
          left: 3px;
          width: 10px;
          height: 2px;
          background: #fff;
          transform: rotate(0);
        }
      }
    }
  }
  .yui-checkbox-label {
    font-size: $font-size-default;
    color: $font-color-default;
    line-height: $line-height;
  }

  &.yui-checkbox-disabled {
    cursor: not-allowed;
    .yui-checkbox-inner {
      background: $B050;
      border: none;
      &.yui-checkbox-checked {
        background: $H100;
      }
    }
    .yui-checkbox-label {
      color: $B400;
    }
  }
}
